<template>
  <!-- 试题结构主页面 -->
  <div class="app-container">
    <!-- <div class="mainBox">
      <ul>
        <li
          :class="index == subjectindex ? 'hover' : ''"
          v-for="(item, index) in modellist"
          @click="qhsubject(index, item.id, item.fullMark, item.examId)"
          :key="index"
        >
          {{ item.examName }}
        </li>
      </ul>
    </div> -->
    <div class="page-card top-tabs">
      <el-tabs v-model="subjectindex" @tab-click="qhsubject">
        <el-tab-pane
          v-for="(item, index) in modellist"
          :key="index"
          :label="item.examName"
          :name="index.toString()"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div style="background: #fff">
      <div class="mainBox" style="margin-top: 15px">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          "
        >
          <el-tabs v-model="tabnumber" @tab-click="studentorder">
            <el-tab-pane label="客观题设置" name="1"></el-tab-pane>
            <el-tab-pane label="主观题设置" name="2"></el-tab-pane>
          </el-tabs>
          <!-- <ul>
            <li :class="tabnumber == 1 ? 'hover' : ''" @click="studentorder(1)">
              客观题设置
            </li>
            <li :class="tabnumber == 2 ? 'hover' : ''" @click="studentorder(2)">
              主观题设置
            </li>
          </ul> -->
          <div class="fullscore">
            <i :class="{ red: totalScore > fullmarkscore }"
              >满分：{{ totalScore }}
            </i>
            =
            {{ objectiveTotalscore }}（{{
              objectivequestionslist.length
            }}道客观题）+ {{ subjectiveTotalscore }}（{{
              subjectiveNumber
            }}道主观题）
            <!-- <el-button type="primary" size="small" @click="copysubjectlcik" v-if="tabnumber == 1">复用模板</el-button> -->
          </div>
        </div>
      </div>
      <!-- 客观题设置 -->
      <objectiveQuestion
        :modellist="modellist"
        v-if="tabnumber == 1"
        :type="1"
        @updateobjectivequestionssurebc="updateobjectivequestionssurebc"
        :objectivequestionslist="objectivequestionslist"
        @emitobjectivequestion="emitobjectivequestion"
        @emitobjectivequestionsuccess="emitobjectivequestionsuccess"
        :examid="examid"
        :examidnavid="examidnavid"
      >
      </objectiveQuestion>
      <!-- 主观题设置 -->
      <subectiveQuestion
        v-if="tabnumber == 2"
        :type="2"
        :subjectivequestionslist="subjectivequestionslist"
        @emitsubjectivequestion="emitsubjectivequestion"
        :questiontid="questiontid"
        :examid="examid"
        :scanStatus="scanStatus"
      ></subectiveQuestion>
    </div>

    <!-- 创建复用考试 -->
    <!-- <examCopy v-if="examCopyIshow" @copyexamclick="copyexamclick" :type="2" :examnavid="examnavid"
      :subjectid="questiontid" :subjectidname="subjectidname"></examCopy> -->
  </div>
</template>

<script>
// import examCopy from '../../../components/model/copysubject.vue'
import objectiveQuestion from "../../components/model/objectivequestion.vue";
import subectiveQuestion from "../../components/model/subectivequestion.vue";
import {
  modellistsubject,
  modellist,
  templateobjectiveDate,
  getsubjectivelist,
  examAssignmentstatus,
} from "../../api/paperinfo/paperinfo.js";
// import { modelItemcaselist, getSubjectiveQuestions, getObjectiveQuestions } from '../../../api/api.js'
export default {
  name: "Project_textstructure",
  data() {
    return {
      firstLoad: true,
      multipleSelection: [],
      examCopyIshow: false,
      pageSize: 50,
      currentPage: 1,
      total: 0,
      tabnumber: "1",
      options: [],
      subjectindex: "0",
      subjectid: "",
      subjectivequestionslist: [], // 主观题
      objectivequestionslist: [], // 客观题
      questiontid: "", // 客观题id
      objectiveTotalscore: 0,
      subjectiveTotalscore: 0,
      modelsearch: {
        name: "",
        examName: "",
        examNumberType: "",
        createdById: "",
        examId: 1,
      },
      bindexamdata: [],
      modellist: [],
      templateId: "",
      examid: "",
      fullmarkscore: 0,
      kgtBigquestion: [],
      subjectiveNumber: 0,
      examidnavid: "",

      scanStatus: "",
    };
  },
  computed: {
    totalScore() {
      return (
        (this.objectiveTotalscore ? Number(this.objectiveTotalscore) : 0) +
        (this.subjectiveTotalscore ? Number(this.subjectiveTotalscore) : 0)
      );
    },
  },
  // computed: {
  //   examId () {
  //     return this.$store.state.examId;
  //   }
  // },
  // watch: {
  //   examId (newVal) {
  //     if (newVal) {
  //       this.examnavid = newVal;
  //       // this.overviewlist(newVal);
  //       this.getsubjectlistclick(newVal)
  //       this.$store.commit('setExamId', ''); // 重置状态
  //     }
  //   }
  // },
  mounted() {
    this.$store.dispatch("getXmxx").then((res) => {
      this.xmxx = res;
      this.modelsearch.examId = res.id;
    });
    this.addmodelsubject();
    this.modelistclick();
  },
  activated() {
    if (!this.firstLoad) {
      this.studentorder();
    }
    this.firstLoad = false;
  },
  methods: {
    emitobjectivequestionsuccess() {
      this.getobjectiveboxtab(this.examid);
    },
    // 批量删除客观题
    emitobjectivequestion(data) {
      this.getobjectiveboxtab(this.examid);
    },
    emitsubjectivequestion(data) {
      this.getsubjectiveboxtab(this.examid);
    },
    //获取客观题列表templateobjectiveDate
    getobjectiveboxtab(id) {
      let obj = {
        examTemplateId: id,
      };
      templateobjectiveDate(obj).then((res) => {
        console.info(res);
        if (res.code == 200) {
          this.objectivequestionslist = res.data.map((item) => {
            return {
              ...item,
              answerArray: item.standardAnswer
                ? item.standardAnswer.split("")
                : [],
            };
          });
          const totalScore = res.data.reduce((sum, item) => {
            return sum + (parseFloat(item.fullScore) || 0);
          }, 0);
          this.objectiveTotalscore = totalScore;
          console.info(
            "this.objectivequestionslist",
            this.objectivequestionslist
          );
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //获取主观题列表
    getsubjectiveboxtab(id) {
      let params = {
        examTemplateId: id,
      };
      getsubjectivelist(params).then((res) => {
        if (res.code == 200) {
          this.subjectivequestionslist = res.data;
          let list = res.data.filter((item) => {
            return item.parentQuestionNumber == 0;
          });
          console.info("dssssdsdsd", list);
          this.subjectiveNumber = list.length;
          const totalScore = list.reduce((sum, item) => {
            return sum + (parseFloat(item.fullScore) || 0);
          }, 0);
          this.subjectiveTotalscore = totalScore;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    //获取模板
    modelistclick() {
      this.$store.dispatch("getXmxx").then((res) => {
        console.info("res", res);
        let obj = {
          projectId: res.id,
        };
        modellist(obj).then((ress) => {
          if (ress.code == 200) {
            if (ress.total > 0) {
              this.modellist = ress.rows;
              this.getobjectiveboxtab(ress.rows[0].id);
              this.getsubjectiveboxtab(ress.rows[0].id);
              this.examid = ress.rows[0].id;
              this.examidnavid = ress.rows[0].examId;
              this.fullmarkscore = ress.rows[0].fullMark;
              this.total = ress.total;

              this.getExamAssignmentstatus();
            }
          } else {
            this.$message({
              message: ress.msg,
              type: "error",
            });
          }
        });
      });
    },
    addmodelsubject() {
      // let obj={examId:1}
      modellistsubject(this.modelsearch).then((res) => {
        console.info("res", res);
        if (res.code == 200) {
          this.bindexamdata = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    updateobjectivequestionssurebc() {
      // 只刷新当前选中项目的客观题数据，不需要重新获取整个学科列表
      if (this.questiontid) {
        this.objectivequestionclick(this.questiontid);
      }
    },
    onSelected() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    copyexamclick(data) {
      this.examCopyIshow = false;
      if (data == 1) {
        // 复用模板成功后，刷新当前选中学科的数据，而不是重新获取整个列表
        if (this.questiontid) {
          this.objectivequestionclick(this.questiontid);
          this.subjectivequestionclick(this.questiontid);
        } else {
          // 如果没有选中的学科，才重新获取列表
          this.getsubjectlistclick(this.examnavid);
        }
      }
    },
    copysubjectlcik() {
      this.examCopyIshow = true;
    },
    studentorder() {
      if (this.tabnumber == 1) {
        this.getobjectiveboxtab(this.examid);
      } else {
        this.getsubjectiveboxtab(this.examid);
      }
    },
    qhsubject() {
      this.fullmarkscore = this.modellist[this.subjectindex].fullmark;
      this.examid = this.modellist[this.subjectindex].id;
      this.examidnavid = this.modellist[this.subjectindex].examId;
      this.getExamAssignmentstatus();
      this.getobjectiveboxtab(this.examid);
      this.getsubjectiveboxtab(this.examid);
    },
    getExamAssignmentstatus() {
      examAssignmentstatus({
        examId: this.examidnavid,
      }).then((res) => {
        this.scanStatus = res.data;
      });
    },
  },
  components: {
    objectiveQuestion,
    subectiveQuestion,
  },
};
</script>

<style scoped>
.mainBox {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.mainBox >>> .el-button {
  background: #366ef4;
  border: solid 1px #366ef4;
  height: 36px;
}
.mainBox >>> .el-select .el-input__inner {
  width: 150px;
  margin-left: 4px;
  border-radius: 10px;
  height: 36px;
}
.mainBox >>> .el-input__icon {
  line-height: 36px;
}
.mainBox >>> .distpicker-address-wrapper select {
  height: 35px;
  line-height: 35px;
  border-radius: 10px;
  font-size: 14px;
  color: #999;
  border: solid 1px #dcdfe6;
}
.mainBox ul {
  width: 70%;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  height: 54px;
}

.mainBox ul li {
  font-size: 14px;
  margin-right: 15px;
  padding: 0 10px;
  line-height: 36px;
  cursor: pointer;
  border-bottom: solid 2px #fff;
  font-weight: 700;
  position: relative;
  color: #8e96a4;
}
.mainBox ul li:hover::after,
.mainBox ul li.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #1a48db;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  color: #2b313c;
}
.mainBox ul li:hover,
.mainBox ul li.hover {
  color: #2b313c;
}
.mainBox div {
  color: #5b6371;
  font-size: 14px;
}
.scopednr b {
  display: inline-block;
  font-weight: normal;
  margin: 0 8px;
  color: #165dff;
  cursor: pointer;
}
.scopednr b:last-child {
  color: #d54941;
}
.fullscore i {
  font-style: normal;
}
.fullscore i.red {
  color: #d54941;
}
</style>